/* eslint-disable */
import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Card, Tag } from 'antd';
import LoadingComponent from '@/components/PageLoading/index';
import dynamic from 'umi/dynamic';
import { useAntdTable } from '@umijs/hooks';
import SlickTable from '@/components/SlickTable';
import { Link } from 'umi';

// 涉及到的标签组件按需加载
const ElementInfo = dynamic({
  loader: () => import('./ElementInfo'),
  loading: LoadingComponent,
});

const ElementDriveRuleInfo = dynamic({
  loader: () => import('./ElementDriveRuleInfo'),
  loading: LoadingComponent,
});

function OrderTable({ paramsObj }) {
  const [tabKey, setTabKey] = useState('hkxs');
  const [, setContentList] = useState({});
  const [size] = useState(10);

  const tabList = [
    {
      key: 'hkxs',
      tab: '号卡销售',
    },
    {
      key: 'other',
      tab: '其他业务',
    },
    // {
    //   key: 'b',
    //   tab: '表单用途',
    // }
  ];

  const gutter = '10px';

  const columns = [
    {
      title: '订单编号',
      dataIndex: 'orderNbr',
      ellipsis: true,
      render: (text, record) => (
        <>
          <div style={{ margin: `${gutter} 0` }}>
            订单编号：<Link to={`/`}>{text}</Link>
          </div>
          <div style={{ margin: `${gutter} 0` }}>
            <Tag color="red">{record.abnormalStatus}</Tag>
            {record.orderFrom ? <Tag>{record.orderFrom}</Tag> : null}
            {record.shippingType ? <Tag>{record.shippingType}</Tag> : null}
          </div>
        </>
      ),
    },
    {
      title: '业务信息',
      dataIndex: 'bizInfo',
      ellipsis: true,
      render: (text, record) => (
        <>
          <div style={{ margin: `${gutter} 0` }}>商品名称：{record.goodsName}</div>
          <div style={{ margin: `${gutter} 0`, color: 'gray' }}>业务类型：{record.typeCode}</div>
        </>
      ),
    },
    {
      title: '订单信息',
      dataIndex: 'orderInfo',
      ellipsis: true,
      render: (text, record) => (
        <>
          <div style={{ margin: `${gutter} 0` }}>创建时间：{record.createTime}</div>
          <div style={{ margin: `${gutter} 0`, color: 'gray' }}>客户电话：{record.phone}</div>
        </>
      ),
    },
    {
      title: '订单状态',
      dataIndex: 'orderStatus',
      ellipsis: true,
    },
    {
      title: '其他信息',
      dataIndex: 'otherInfo',
      ellipsis: true,
      render: (text, record) => (
        <>
          <div style={{ margin: `${gutter} 0` }}>{record.payStatus}</div>
          <div style={{ margin: `${gutter} 0`, color: 'red' }}>¥{record.payAmount}</div>
        </>
      ),
    },
  ];

  useEffect(() => {
    onTabChange('other');
  }, []);

  const onTabChange = key => {
    const contentMap = {
      ElementInfo: <ElementInfo />,
      ElementDriveRuleInfo: <ElementDriveRuleInfo />,
    };
    setContentList(contentMap);
    setTabKey(key);
  };

  const getTableData = ({ current, pageSize, paramsObj }) => {
    return request('/oqms/orderQuery/queryOrderPage', {
      data: {
        orderSort: '',
        pageNo: current,
        pageSize,
        params: paramsObj,
      },
    }).then(res => {
      if (res.resultObject && Array.isArray(res.resultObject.data)) {
        return {
          total: res.resultObject.totalCount,
          data: res.resultObject.data.map(item => ({
            orderNbr: item['order_nbr'],
            abnormalStatus: item['abnormal_status'] === '00A' ? '正常单' : '异常单',
            orderFrom: item['order_from_c'],
            shippingType: item['shipping_type'],
            goodsName: item['goods_name'],
            typeCode: item['type_code_c'],
            createTime: item['tid_time'],
            phone: item['phone_num'],
            orderStatus: item['order_status_c'],
            payStatus: item['pay_status'] === 1 ? '已支付' : '未支付',
            payAmount: item['order_amount'],
          })),
        };
      }
      return {
        total: 0,
        data: [],
      };
    });
  };

  const { tableProps } = useAntdTable(
    params => {
      return getTableData({ ...params, pageSize: size, paramsObj });
    },
    [paramsObj],
    {
      defaultPageSize: size,
    }
  );

  const { pagination, ...restTableProps } = tableProps;

  return (
    <Card
      style={{ width: '100%' }}
      tabList={tabList}
      className="cute"
      activeTabKey={tabKey}
      onTabChange={key => {
        onTabChange(key);
      }}
    >
      {/* {Object.keys(contentList).map(
        key =>
          (key === 'ElementInfo' || key === menuKey) && (
            <div key={key} style={{ display: menuKey === key ? 'block' : 'none' }}>
              {contentList[key]}
            </div>
          )
      )} */}
      <SlickTable
        style={{ marginTop: 8 }}
        rowKey={record => record.orderNbr}
        columns={columns}
        bordered={false}
        {...restTableProps}
        data={{
          pagination: {
            ...pagination,
            pageSize: size,
          },
        }}
      />
    </Card>
  );
}

export default OrderTable;
